<template>
  <div>
    <p v-if="podMap.length == 1" class="pod-name">{{ podName }}</p>
    <el-select v-else v-model="podName" class="pod-name-select" placeholder="请选择" @change="selectPod">
      <el-option v-for="item in podMap" :key="item" :label="item" :value="item">
      </el-option>
    </el-select>
    <div class="log">
      <ul ref="logBox" class="log-box">
        <li class="log-lis" v-for="(e, i) in logData" v-html="e" :key="i"></li>
      </ul>
    </div>
  </div>
</template>

<script>

import { getGameTaskVersionPodName } from '@/api/gameTask'
import { usageDuration, myNamespace } from '@/api/dashboard'
import { formatTime } from "@/utils/tool";
export default {
  data() {
    return {
      podName: '',
      podMap: [],
      gpuData: {},
      cpuData: {},
      memData: {},
      logSocket: null,
      logMsg: null,
      logData: [],
      metrics: [],
      plots: []
    };
  },
  props: ['version'],
  components: {

  },
  watch: {
    active(val) {
      console.log("val", val)
      this.renderLog()
    }
  },
  methods: {
    async getPod() {
      let res = await getGameTaskVersionPodName({ id: this.version.id })
      this.podName = res.data[0]
      this.podMap = res.data
      return
    },
    async getduration(pod_name, resource_type) {
      return await usageDuration({
        end: formatTime(new Date().getTime()),
        pod_name,
        resource_type,
        start: formatTime(new Date().getTime() - 1000 * 60 * 60 * 1),
        step: "15s",
      })
    },
    selectPod() {
      this.renderLog(this.podName)
    },

    msgFn(e) {
      if (e.data == "ws message received") return;
      console.log(e.data)
      if (this.logData.length > this.num * 30) {
        this.logData.shift();
        this.logData.push(e.data.replace(/\n/g, "<br />"));
      } else {
        this.logData.push(e.data.replace(/\n/g, "<br />"));
      }
      this.toBottom();
    },
    toBottom() {
      let sH = this.$refs.logBox && this.$refs.logBox.scrollHeight;
      let sT = this.$refs.logBox && this.$refs.logBox.scrollTop;
      let oH = this.$refs.logBox && this.$refs.logBox.offsetHeight;
      if (sH - sT < oH + 40) {
        this.$refs.logBox.scrollTop = this.$refs.logBox.scrollHeight;
      } else {
        console.log(
          "断掉数据push，并且存储到临时容器。 当滚动条滚动到底部的时候 再把临时数据塞进正常ui"
        );
      }
    },
    async renderLog() {
      this.logData = []
      this.logMsg && this.logMsg.disconnect();
      let res = await this.$myInfo(this)
      console.log(await myNamespace())
      let namespaceReg = await myNamespace()
      this.logMsg = new this.$ws({ url: `cloud/ws/logwatch/${res.id}/${namespaceReg.data}/${this.podName}/train` })
      this.logMsg.initWebSocket(this.msgFn)
    },

  },
  async mounted() {
    if (this.version.status == 'running') {
      await this.getPod()
      this.selectPod()
    }
  }
}
</script>
<style lang="less" scoped>
.chart-item {
  height: 320px;
}

.log {
  background: #000;
  padding: 20px;
  margin: 20px 0 0;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.6);
  min-height: 400px;

  .log-box {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 10px;

    .log-lis {
      color: #999;
      font-size: 12px;
    }
  }
}

.metrics {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .metrics-item {
    width: 50%;
    height: 400px;
  }
}
</style>